<template>
  <div>
    <catalogue-form
      ref="catalogueForm"
      :mediaId="data.mediaId"
      :isEdit="isEdit"
      :key="key"
    ></catalogue-form>
    <div class="fl-end">
      <div class="btns" v-if="isEdit">
        <el-button plain type="primary" @click="key++">取消</el-button>
        <el-button type="primary" @click="handleConfirm">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { editMediaCatalogue } from "@/api/system-config/catalogue";
import CatalogueForm from "@/components/CatalogueForm/index";
export default {
  name: "descriptionsbianmu",
  props: {
    data: {
      type: Object,
      default: () => {},
      required: false,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    CatalogueForm,
  },
  data() {
    return {
      key: 0,
    };
  },
  methods: {
    async handleConfirm() {
      const res = await this.$refs.catalogueForm.getFormVal().catch((e) => e);
      if (!res) return;
      editMediaCatalogue(this.data.mediaId, res).then(() => {
        this.$message.success("保存成功");
      });
    },
  },
};
</script>
<style lang="scss" scoped>
:deep(.el-upload-dragger) {
  width: 100%;
  height: 100%;
}
:deep(.el-range-separator) {
  min-width: 20px;
}
:deep(.el-date-editor) {
  max-width: 220px;
}
:deep(.el-upload__text) {
  padding: 1rem;
}
.btns {
  display: inline-flex;
}
.fl-end {
  display: flex;
  justify-content: flex-end;
}
:deep(.el-form-item__label) {
  font-weight: normal;
}
</style>
